<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    li {
      height: 100px;
      width: 200px;
    }
  </style>
</head>
<body>

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>
  <img class="imgLazyLoad" data-imgurl="images/1.jpg"/>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-imgurl="images/2.jpg"/>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-imgurl="images/3.jpg"/>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-imgurl="images/4.jpg"/>
  </ul>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <img class="imgLazyLoad" data-imgurl="images/5.jpg"/>
  </ul>
</div>

</body>
</html>


<script src="jq/jquery-1.12.2.js"></script>
<script>

  $('img').each(function () {   //在未触发滚动事件时先判断图片是否已经出现在视窗中，打开页面时先遍历一次
    if (checkShow($(this)) && !isLoaded($(this))) {
      loadImg($(this));   //加载当前img
    }
  });
  
  $(window).on('scroll', function () {   //滚动的触发事件
    $('img').each(function () {   //遍历img标签
      if (checkShow($(this)) && !isLoaded($(this))) {
        loadImg($(this));   //加载当前img
      }
    });
  });

  //    function checkShow($img) {
  //    };   // 定义checkShow函数判断当前img是否已经出现在了视野中，传入img对象
  //    function isLoaded($img) {
  //    };   //定义isLoaded函数判断当前img是否已经被加载过了
  //    function loadImg($img) {
  //    };   //定义loadImg函数加载图片


  function checkShow($img) {   // 传入img对象
    var sTop = $(window).scrollTop();   //即页面向上滚动的距离
    var wHeight = $(window).height();   // 浏览器自身的高度
    var offsetTop = $img.offset().top;   //目标标签img相对于document顶部的位置

    if (offsetTop < (sTop + wHeight) && offsetTop > sTop) {   //在2个临界状态之间的就为出现在视野中的
      return true;
    }
    return false;
  }


  function isLoaded($img) {
    return $img.attr('data-imgurl') === $img.attr('src');   //如果data-imgurl和src相等那么就是已经加载过了
  }


  function loadImg($img) {
    $img.attr('src', $img.attr('data-imgurl'));   // 把自定义属性中存放的真实的src地址赋给src属性
  }
</script>